<template>
	<view>
		<view class="record-tab">
			<view :class="['record-item',{'act':recordindex==index}]" v-for="(item,index) in record" :key='index'
				@click="records(index)">{{item}}</view>
		</view>
		<view class="record-list" v-if="list.length">
			<view class="record-item" v-for="(item,index) in list" :key="index">
				<view class="record-price bor">
					<view class="record-icon">
						<image src="/static/other/tx.png"></image>
						<view>提现</view>
					</view>
					<view class="record-pri">{{item.money}}￥</view>
				</view>
				<view class="record-price">
					<view class="record-icon">
						<image src="/static/other/time.png"></image>
						<view>申请提现时间</view>
					</view>
					<view class="record-te">{{item.time}}</view>
				</view>
				<view class="record-price">
					<view class="record-icon">
						<image src="/static/other/state.png"></image>
						<view>状态</view>
					</view>
					<view class="record-te">{{item.statuss}}</view>
				</view>
			</view>
		</view>
		<view class="no" v-else>暂无提现记录</view>
	</view>
</template>

<script>
	import api from "@/common/fxb.js"
	export default {
		data() {
			return {
				record: ['提现中', '已提现'],
				recordindex: 0,
				list: [],
				page:0,
				pagesize:10,
			};
		},
		onLoad() {
		},
		onShow() {
			this.list = [];
			this.page = 0
			this.getdata();
		},
		onReachBottom() {
			this.getdata();
		},
		methods: {
			records: function(index) {
				this.list = [];
				this.page = 0
				this.recordindex = index
				this.getdata();
			},
			getdata: function() {
				var that = this;
				api.ApiGet({
					status: that.recordindex,
					page:that.page,
					s_id:wx.getStorageSync('s_id'),
					pagesize:that.pagesize,
					do: 'Tixian_list',
				}, function(res) {
					that.list = that.list.concat(res.data.datas);
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-bg;
	}

	.record-tab {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 400upx;
		height: 75upx;
		margin: 30rpx 175upx;
		border: 1upx solid #F97C40;
		border-radius: 12upx;
		overflow: hidden;

		.record-item {
			width: 50%;
			height: 75upx;
			line-height: 75upx;
			text-align: center;
			font-size: 32upx;
			color: #F97C40;
		}

		.act {
			background-color: #F97C40;
			color: #fff;
		}
	}

	.record-list {
		margin-bottom: 30rpx;

		.record-item {
			width: 700upx;
			padding: 0 25upx;
			background-color: #fff;
			padding-bottom: 18upx;
			margin-bottom: 20upx;

			.bor {
				border-bottom: 1upx solid #F8F5F9;
			}

			.record-price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 25upx 0;

				.record-icon {
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: #515151;

					image {
						width: 36upx;
						height: 36upx;
						margin-right: 20upx;
					}
				}

				.record-pri {
					font-size: 30rpx;
					color: #F97C40;
				}

				.record-te {
					font-size: 26upx;
					color: #939395;
				}
			}
		}
	}

	.no {
		width: 100%;
		text-align: center;
		padding: 20upx 0;
		color: #666;
		font-size: 28upx;
	}
</style>
